<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="my" uri="http://amani.com/function-taglib"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="../shared/common_header.jsp"%>
<title>VIP预约</title>
</head>
<body>
	<section class="memCheck_top">
		<form action="${ROOT_PATH }Orders/Step4" name="step3Form" id="step3Form"  method="post">
		  	<input name="openid"  id="openid" type="hidden" value="${openid }"/> 
			<input name="ordersFactProject" id="ordersFactProject" type="hidden" value="${ordersFactProject }" />
			<input name="staffno" id="staffno" type="hidden" value="${staffno }" />  
			<input name="orderDate" id="orderDate" type="hidden" value="" /> 
		</form>
		<div class="calendar">
		    <div class="title">
		        <a href="javascript:;" class="on" rel="today">今天</a>
		        <a href="javascript:;" rel="tomorrow">明天</a>
		        <a href="javascript:;" rel="other">其他</a>
		        <div class="clear"></div>
		    </div>
		    <div class="content today">
		         <span><a href='javascript:;'>10:00</a></span> 
		         <span><a href='javascript:;'>11:00</a></span>  
		         <span><a href='javascript:;'>12:00</a></span>  
		         <span><a href='javascript:;'>13:00</a></span>  
		         <span><a href='javascript:;'>14:00</a></span>  
		         <span><a href='javascript:;'>15:00</a></span>  
		         <span><a href='javascript:;'>16:00</a></span>  
		         <span><a href='javascript:;'>17:00</a></span>   
		         <span><a href='javascript:;'>18:00</a></span>    
		         <span><a href='javascript:;'>19:00</a></span>    
		         <span><a href='javascript:;'>20:00</a></span>    
		         <span><a href='javascript:;'>21:00</a></span>    
		        <div class="clear"></div>
		    </div>
		    <div class="content tomorrow">
		    	 <span><a href='javascript:;'>10:00</a></span> 
		         <span><a href='javascript:;'>11:00</a></span>  
		         <span><a href='javascript:;'>12:00</a></span>  
		         <span><a href='javascript:;'>13:00</a></span>  
		         <span><a href='javascript:;'>14:00</a></span>  
		         <span><a href='javascript:;'>15:00</a></span>  
		         <span><a href='javascript:;'>16:00</a></span>  
		         <span><a href='javascript:;'>17:00</a></span>   
		         <span><a href='javascript:;'>18:00</a></span>    
		         <span><a href='javascript:;'>19:00</a></span>    
		         <span><a href='javascript:;'>20:00</a></span>    
		         <span><a href='javascript:;'>21:00</a></span>   
		        <div class="clear"></div>
		    </div>
		    <div class="content other">
		        <span style='width:50%;'><a href='javascript:;' id="other1">1</a></span> 
		        <span style='width:50%;'><a href='javascript:;' id="other2">2</a></span>  
		        <span style='width:50%;'><a href='javascript:;' id="other3">3</a></span>  
		        <span style='width:50%;'><a href='javascript:;' id="other4">4</a></span>  
		        <span style='width:50%;'><a href='javascript:;'	id="other5">5</a></span>  
		        <span style='width:50%;'><a href='javascript:;'	id="other6">6</a></span>  
		        <span style='width:50%;'><a href='javascript:;'	id="other7">7</a></span>  
		        <span style='width:50%;'><a href='javascript:;'	id="other8">8</a></span>     
		        <div class="clear"></div>
		    </div>
		</div>
	</section>
	
	<script type="text/javascript">
		$(function(){
			(function initPage(){ 
				//初始化当前页面，默认显示第一天的数据
				$('.calendar').show().find('.title').show(); 
				$('.today').show();
				$('.title').show();

				$('#other1').text(new Date(Date.now()+24*60*60*1000).toLocaleDateString());
				$('#other2').text(new Date(Date.now()+2*24*60*60*1000).toLocaleDateString());
				$('#other3').text(new Date(Date.now()+3*24*60*60*1000).toLocaleDateString());
				$('#other4').text(new Date(Date.now()+4*24*60*60*1000).toLocaleDateString());
				$('#other5').text(new Date(Date.now()+5*24*60*60*1000).toLocaleDateString());
				$('#other6').text(new Date(Date.now()+6*24*60*60*1000).toLocaleDateString());
				$('#other7').text(new Date(Date.now()+7*24*60*60*1000).toLocaleDateString());
				$('#other8').text(new Date(Date.now()+8*24*60*60*1000).toLocaleDateString());
			})();
			
			//数据提交方法
			var commitData=function(){
				$("#step3Form").submit();
			}; 
            var otherDate=new Date(Date.now()).toLocaleDateString();
            
            $('.calendar .title').find('a').click(function () {
                var obj = $(this), type = obj.attr('rel');
                obj.addClass('on').siblings().removeClass('on');
                $('.' + type).show().siblings().hide();
                $('.title').show();
                if (type == 'today') { 
                	otherDate=new Date(Date.now()).toLocaleDateString();
                } else if (type == 'tomorrow') { 
                	otherDate=new Date(Date.now()+24*60*60*1000).toLocaleDateString();
                } else if (type == 'other') {
                	otherDate=""
                }
            });
            $('.today a, .tomorrow a').click(function () {
                var time = $(this).html();   
                $('#orderDate').val(otherDate+' '+time) 
                commitData();
            });
            $('.other a').click(function () { 
                otherDate =  $(this).text();
                var parent = $(this).parents('.other'); 
                parent.hide();
                parent.prev().show();
            });
		})
	</script>
	
</body>
</html>